import React from 'react';
import axios from '../../../util/http';
import * as url from '../../../util/api'
import { Button, Table,Menu, Dropdown,  message} from 'antd'
import {Link} from 'react-router-dom'
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import './SlyderAdventure.css'
export default class SlyderAdventure extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Data: []
    };
    this.menu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="1" icon={<UserOutlined />}>
          详情
        </Menu.Item>
        <Menu.Item key="2" icon={<UserOutlined />}>
          删除
        </Menu.Item>
        {/* <Menu.Item key="3" icon={<UserOutlined />}>
          删除
        </Menu.Item> */}
      </Menu>
    );
    this.columns = [
      {
        title: '主题',
        dataIndex: 'theme',
      },
      {
        title: '状态',
        dataIndex: 'state',
      },
      {
        title: '参与人数',
        dataIndex: 'math',
      },
      {
        title: '中奖名单',
        dataIndex: 'name',
      },
      {
        title: '参与限制',
        dataIndex: 'astrict',
        
      },
      {
        title: '活动区域',
        dataIndex: 'area',
      },
      {
        title: '活动对象',
        dataIndex: 'people',
      },
      {
        title: '促销经销商标签',
        dataIndex: '',
      },
      {
        title: '',
        dataIndex: '其他操作',
        render: () =>
          <Dropdown overlay={this.menu}>
            <Button>
              其他操作<DownOutlined />
            </Button>
          </Dropdown>
      }
    ];
  }
  onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra);
  }
  handleButtonClick(e) {
    message.info('Click on left button.');
    console.log('click left button', e);
  }
  handleMenuClick(e) {
    message.info('Click on menu item.');
    console.log('click', e);
  }
  render() {
    let { Data } = this.state
    return (
      <div>
        <div className={'Head'}>
          <span>已经发布了0场抽奖活动，还可以发布5场</span>
          <div>
            {/* <Button className={'button'} style={{ backgroundColor: 'white', border: '1px solid #D3D3D3', color: 'black' }} type="primary">预览</Button> */}
            <Link to="/homepage/newslyderadventure">
              <Button className={'button'} style={{ backgroundColor: '#4BD0B6', border: '#4BD0B6' }} type="primary">新增</Button>
            </Link>
          </div>
        </div>
        <Table columns={this.columns} dataSource={Data} onChange={this.onChange} />
      </div>
    );
  }
  componentDidMount() {
    axios({
      url:url.PostDzpData,
      method: 'post'
    }).then(res => {
      console.log(res.data.data)
      let data = res.data.data.filter((item) => {
        item.key = item.id
        delete item.id
        return item
      })
      this.setState({
        Data:data
      })
    })
  }
}
